/**
 * @class gossips.Viewport
 * @extends Ext.Panel
 * 
 * The viewport is the application's shell - the parts of the UI that don't change. In the Gossips app, we only ever
 * render a single view at a time, so we use a fullscreen card layout here. The other part of the UI is the search list
 * on the left, which we add as a docked item.
 * 
 * Because the searchesList created below bubbles its selectionchange event, the object that creates this Viewport 
 * (the Application instance created in app/app.js) can attach a listener to that event to initiate a new search.
 * 
 */
gossips.Viewport = Ext.extend(Ext.Panel, {
    id        : 'viewport',
    layout    : 'card',
    fullscreen: true,
	
    title: 'Gossips',
    useTitleAsBackText: true,
	
    initComponent : function() {
        this.navigationButton = new Ext.Button({
            hidden: !Ext.is.Phone || Ext.Viewport.orientation == 'landscape',
            text: 'Navigation',
            handler: this.onNavButtonTap,
            scope: this
        });

        var btns = [this.navigationButton];

        this.navigationBar = new Ext.Toolbar({
            ui: 'dark',
            dock: 'top',
            title: this.title,
            items: btns.concat(this.buttons || []),
            height: 45
        });

        this.navigationPanel = new gossips.views.SearchBar({
            useToolbar: Ext.is.Phone ? false : true,
            updateTitleText: false,
            dock: 'left',
            hidden: !Ext.is.Phone && Ext.Viewport.orientation == 'portrait',
            toolbar: Ext.is.Phone ? this.navigationBar : null,
            listeners: {
                scope: this,
            }
        });

        if (!Ext.is.Phone) {
            this.navigationPanel.setWidth(250);
        }

        this.dockedItems = this.dockedItems || [];
        this.dockedItems.unshift(this.navigationBar);

        if (!Ext.is.Phone && Ext.Viewport.orientation == 'landscape') {
            this.dockedItems.unshift(this.navigationPanel);
        }
        else if (Ext.is.Phone) {
            this.items = this.items || [];
            this.items.unshift(this.navigationPanel);
            this.navigationPanel.hide(false);
            this.navigationPanel.setFloating(true);
        } else {
            this.dockedItems.unshift(this.navigationPanel);
            this.navigationPanel.hide(false);
            this.navigationPanel.setFloating(true);
        }

        gossips.Viewport.superclass.initComponent.call(this);
    },

    onNavPanelItemTap: function() {
    
        if (Ext.is.Phone || Ext.Viewport.orientation == 'portrait') {
            if (!this.navigationPanel.hidden) {
                this.navigationPanel.hide(false); 
                this.navigationPanel.setFloating(true);
            }
        } 
    },

    onNavButtonTap : function() {
        this.navigationPanel.showBy(this.navigationButton, 'fade');
    },

    layoutOrientation : function(orientation, w, h) {
        if (!Ext.is.Phone) {
            if (orientation == 'portrait') {
                //this.removeDocked(this.navigationPanel, false);
                this.navigationPanel.hide(false);
                if (this.navigationPanel.rendered) {
                    this.navigationPanel.el.appendTo(document.body);
                }
                this.navigationPanel.setFloating(true);
                this.navigationPanel.setHeight(400);
                this.navigationButton.show(false);
            }
            else {
                this.navigationPanel.setFloating(false);
                if (this.navigationPanel.hidden)
                    this.navigationPanel.show(false);
                this.navigationButton.hide(false);
                //this.insertDocked(0, this.navigationPanel);
            }
            this.navigationBar.doComponentLayout();
        }

        gossips.Viewport.superclass.layoutOrientation.call(this, orientation, w, h);
    },
	
});

